事件氣泡(Event Bubbling)

一種預設事件傳遞方式，可以讓事件處理函式在觸發事件元素和父元素都被執行

• 一般步驟

1. 從觸發事件元素開始傳遞
2. 傳遞到父元素
3. 繼續向上傳遞，直到傳遞到最上層元素
4. 事件處理函式在所有元素被執行
5. 讓事件處理函式更廣泛範圍內被執行

• 注意事項

  • 一種預設事件傳遞方式，可以通過 stopPropagation() 阻止事件氣泡
  • 會導致事件處理函式被重複執行，可以通過 capture() 避免事件氣泡

• 事件氣泡應用

讓事件處理函式在更廣泛的範圍內被執行

<div id="container">
  <h1>標題</h1>
  <p>段落</p>
  <button id="button">按鈕</button>
</div>

const container = document.getElementById("container");

container.addEventListener("click", function() {
  console.log("事件氣泡：在容器中觸發");
});

const h1 = document.querySelector("h1");

h1.addEventListener("click", function() {
  console.log("事件氣泡：在標題中觸發");
});

const button = document.getElementById("button");

button.addEventListener("click", function() {
  console.log("事件氣泡：在按鈕中觸發");
});

點擊 container、h1 或 button 時，都會觸發 click 事件

事件氣泡：在容器中觸發
事件氣泡：在標題中觸發
事件氣泡：在按鈕中觸發

通過 stopPropagation() 阻止事件氣泡

const container = document.getElementById("container");

container.addEventListener("click", function() {
  console.log("事件氣泡：在容器中觸發");
  // 阻止事件氣泡
  event.stopPropagation();
});

const h1 = document.querySelector("h1");

h1.addEventListener("click", function() {
  console.log("事件氣泡：在標題中觸發");
});

const button = document.getElementById("button");

button.addEventListener("click", function() {
  console.log("事件氣泡：在按鈕中觸發");
});

點擊 container 時，事件處理函式只會在 container 元素上被執行

事件氣泡：在容器中觸發

事件捕捉(Event Capturing)

一種非預設事件傳遞方式，可以讓事件處理函式在觸發事件元素之前被執行

• 一般步驟

1. 從最上層元素開始傳遞
2. 傳遞到其子元素
3. 繼續向下傳遞，直到傳遞到最下層元素
4. 事件處理函式在所有元素上被執行

• 注意事項

  • 一種非預設的事件傳遞方式，需要通過 addEventListener() 第三個參數指定
  • 導致事件處理函式被重複執行，可以通過 stopPropagation() 阻止事件捕捉

• 事件捕捉應用

來讓事件處理函式在更早階段被執行

<div id="container">
  <h1>標題</h1>
  <p>段落</p>
  <button id="button">按鈕</button>
</div>

const container = document.getElementById("container");

container.addEventListener("click", function() {
  console.log("事件捕捉：在容器中觸發");
}, true);

const h1 = document.querySelector("h1");

h1.addEventListener("click", function() {
  console.log("事件捕捉：在標題中觸發");
}, true);

const button = document.getElementById("button");

button.addEventListener("click", function() {
  console.log("事件捕捉：在按鈕中觸發");
}, true);

點擊 container、h1 或 button 時，都會觸發 click 事件

事件捕捉：在容器中觸發
事件捕捉：在標題中觸發
事件捕捉：在按鈕中觸發

可以通過 stopPropagation() 阻止事件捕捉

const container = document.getElementById("container");

container.addEventListener("click", function() {
  console.log("事件捕捉：在容器中觸發");
  // 阻止事件默認行為
  event.preventDefault();
}, true);

const h1 = document.querySelector("h1");

h1.addEventListener("click", function() {
  console.log("事件捕捉：在標題中觸發");
  // 阻止事件默認行為
  event.preventDefault();
}, true);

const button = document.getElementById("button");

button.addEventListener("click", function() {
  console.log("事件捕捉：在按鈕中觸發");
  // 阻止事件默認行為
  event.preventDefault();
}, true);

點擊 container 時，事件處理函式只會在 container 元素上被執行

事件捕捉：在容器中觸發

資料來源:JavaScript DOM Event (事件處理)